<template>
    <div>
        <head-go></head-go>
        <div class="spxq" >
            <img :src="require('@/'+medicines[med][med1].img)" height="300" width="400"/>
            <div class="go-car">
                <h2>{{medicines[med][med1].gnname}}</h2>
                <div class="sell">
                    <span style="font-size: 12px">￥</span><strong>{{medicines[med][med1].gmprice}}</strong>
                </div>
                <div style="margin-top: 30px">
                    <template>
                        <button @click.once="flag=!flag" v-if="flag">加入购物车</button>
                        <button @click.once="flag=!flag" v-else>已加购</button>
                    </template>
                    <p><i class="el-icon-warning"></i>（点击加入购物车即可，需要其他备注在购物车填写）</p>
                </div>
                <div class="mycar" @click="goUrlshopping()">
                    我的购物车
                </div>
            </div>
        </div>
        <div class="guess-you-like">
            <p><i class="el-icon-sunny"></i>希望如期而至的不只是春天，还有疫情过后平安的人</p>
        </div>
       <with-us></with-us>
    </div>
</template>

<script>
    import HeadGo from "@/components/HeadGo";
    import WithUs from "@/components/WithUs";
    import StoreData from "@/assets/data/storePage.json";
    export default {
        name: "Medicine",
        components:{HeadGo,StoreData,WithUs},
        data(){
            return{
                flag:true,
                radio:3,
                medicines:StoreData.medicines,
                med:'',
                med1:''
            }
        },
        created() {
            this.med=this.$route.params.medicine_id
            this.med1=this.$route.params.medicine_id1
        },
        methods:{
            goUrlshopping(){
                this.$router.push({path:'/shopping'})
            }

        }
    }
</script>

<style scoped>
    .spxq{
        width: 800px;
        height: 300px;
        margin: 40px auto;
        background: #f8f8f8;
    }
    .spxq img{
        float: left;
    }
    .go-car{
        float: right;
    //border: 1px solid black;
        width: 395px;
        height: 300px;
        text-align: left;
    }
    .go-car h2{
        margin-top: 30px;
    }
    .go-car p{
        font-size: 12px;
        margin:10px 0 0 60px;
        display: inline-block;
    }
    /deep/.el-radio__input.is-checked + .el-radio__label {
        color: #056da1 !important;
    }
    /deep/.el-radio__input.is-checked .el-radio__inner{
        background-color: #056da1;
    }
    .choose{
        /* border: 1px solid black;*/
        width: 150px;
        margin: 50px 0 0 100px;
    }
    .go-car button{
        width: 100px;
        height: 40px;
        border-radius: 5px;
        color: white;
        border: none;
        background: #056da1;
        font-weight: bold;
        margin-top: 30px;
        margin-left: 150px;
    }
    .sell{
    //border: 1px solid black;
        color:#ff4800 ;
        font-size: 22px;
        float: right;
        margin-right: 30px;
    }
    .sell span:first-of-type{
        color: #ff4800;
    }
    .guess-you-like i{
        color: orange;
        margin-right: 20px;
        font-size: 20px;
    }
    .guess-you-like {
        color: #6a6868;
        text-align: center;
    }
    .mycar{
        float: right;
        color: #056da1;
        font-size: 14px;
        margin: 50px 10px 10px 0;
    }
</style>